<template>
  <view class="content">
    <view class="btn bott-btn">
      <button class="new" type="primary" @click="handleAdd">添加地址</button>
    </view>
    <view class="content-box">
      <navigator class="item-box-ng" v-for="(item, index) in lists"
        :url="`/packageA/pages/common/adress-editing/index?id=${item.id}`" hover-class="navigator-hover">
        <view class="item-box">
          <text class="status">
            <text class="isReal" v-if="item.siteType == 1">装</text>
            <text class="isnotReal" v-if="item.siteType == 2">卸</text>
          </text>
          <text class="cph1">{{ item.siteName }}</text>

          <uni-icons type="forward" size="20"></uni-icons>
        </view>
      </navigator>
      <uni-load-more :status="pageParams.isMore" />
    </view>
  </view>
</template>

<script>
  import { getDataLists } from '@/api/address.js';
  export default {
    data() {
      return {
        lists: [],
        queryParam: {
          pageNo: 1,
          pageSize: 10
        },
        pageParams: {
          isMore: 'more'
        }
      };
    },
    onShow() {
      this.lists = [];
      this.getList();
    },
    onPullDownRefresh() {
      this.queryParam.pageNo = 1;
      this.pageParams.isMore = 'more';
      this.lists = [];
      this.getList();
    },
    onReachBottom() {
      console.log('onReachBottom~~');
      if (this.pageParams.isMore == 'more') {
        this.queryParam.pageNo++;
        this.getList();
      }

      console.log('onReachBottom');
    },
    methods: {
      handleAdd() {
        uni.navigateTo({
          url: '/packageA/pages/common/adress-editing/index'
        });
      },
      //获取列表
      async getList() {
        try {
          //遍历对象过滤空值
          let data = {};
          Object.keys(this.queryParam).forEach((item) => {
            if (this.queryParam[item]) {
              data[item] = this.queryParam[item];
            }
          });
          let res = await getDataLists(data);
          if (res.code == 0) {
            this.lists = [...this.lists, ...res.data.list];
            if (res.data.total == this.lists.length) {
              this.pageParams.isMore = 'noMore';
            } else {
              this.pageParams.isMore = 'more';
            }
          }
          //停止下拉刷新
          wx.hideNavigationBarLoading();
          //停止下拉刷新
          wx.stopPullDownRefresh();
        } catch (e) {
          console.log('getVehicle: ', e);
          return false;
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  .cph1 {
    flex: 1;
    font-weight: bold;
    font-size: 32rpx;
    padding-left: 20rpx;
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .content {
    height: 100vh;
    font-size: 24.88rpx;
    background: #f5f5f5;

    .content-box {
      margin-top: 8rpx;
      padding: 20rpx;

      .item-box-ng {
        .item-box {
          height: 80rpx;
          line-height: 80rpx;
          box-sizing: content-box;
          padding: 20rpx;
          display: flex;
          justify-content: space-between;
          position: relative;
          background: #fff;
          border-radius: 16rpx;
          margin-bottom: 20rpx;

          .status {
            height: 64rpx;
            line-height: 64rpx;
            position: relative;
            top: 9rpx;
          }

          .isReal,
          .isnotReal {
            color: #fff;
            padding: 18rpx;
            border-radius: 5px;
            font-size: 30.22rpx;
            font-weight: 600;
          }

          .isReal {
            background: linear-gradient(180deg, #59c3ff, #409efe 100%);
          }

          .isnotReal {
            background: linear-gradient(180deg, #ffd467, #f78600 100%);
          }
        }
      }
    }
  }
</style>